<template>
    <div>
        <ClientSelect v-model="client_id" :show-all="false" style="margin-bottom:10px;width:250px;margin-right:25px;" />
        <CheckboxGroup v-model="params" style="display:inline-block">
            <!-- <Checkbox label="voltage">电压</Checkbox> -->
            <Checkbox label="time_delay">时延</Checkbox>
            <Checkbox label="network_speed_up">上行流量</Checkbox>
            <Checkbox label="network_speed_down">下行流量</Checkbox>
            <Checkbox label="cell_id">小区ID</Checkbox>
            <Checkbox label="cell_pci">PCI</Checkbox>
            <Checkbox label="cell_band">频段号</Checkbox>
            <Checkbox label="cell_rsrp">RSRP</Checkbox>
            <Checkbox label="cell_sinr">SINR</Checkbox>
            <Checkbox label="cell_rsrq">RSRQ</Checkbox>
            <Checkbox label="cell_rssi">RSSI</Checkbox>
        </CheckboxGroup>
        <div>
            <div style="margin-top:10px;">
                <DatePicker v-model="start_time" type="datetime" :format="time_format" placeholder="Select date" @on-change="handleDateChange" style="width: 250px;margin-right:5px;display:inline-block" />
                <Button type="primary" @click="handleGetDetectionValues" style="margin-right: 5px;" :disabled="client_id == ''">查询</Button>
                <!-- 增加时间前进后退按钮 -->
                <Button icon="md-arrow-back" @click="handleMoveTime(-1)" style="margin-right: 5px;" title="向后查看" :disabled="client_id == ''"></Button>
                <Button icon="md-arrow-forward" @click="handleMoveTime(1)" style="margin-right: 25px;" title="向前查看" :disabled="client_id == ''"></Button>
                <Button icon="md-remove" @click="handleScale(1)" style="" title="减小" :disabled="step_index == step_values.length - 1 || client_id == ''" ></Button>
                <span style="color:#aaa;padding:0 5px;">数据间隔：{{step_values[step_index]}}秒</span>
                <Button icon="md-add" @click="handleScale(-1)" style="margin-right: 25px;" title="扩大" :disabled="step_index == 0 || client_id == ''"></Button>
            </div>
        </div>
        <div v-show="chart_show" style="margin-top:20px;">
            <!-- <ElecParamsChart ref="elec_params_chart" />
            <TimeDelayChart ref="time_delay_chart" /> -->
            <MultiAxisChart ref="multi_axis_chart" />
        </div>
    </div>
</template>

<script>
import ClientSelect from './ClientSelect.vue';
// import ElecParamsChart from './ElecParamsChart.vue';
// import TimeDelayChart from './TimeDelayChart.vue';
import MultiAxisChart from './MultiAxisChart.vue'; // 引入新组件

export default {
    name: 'DetectionValuesView',
    components: {
        // ElecParamsChart,
        // TimeDelayChart,
        MultiAxisChart,
        ClientSelect
    },
    data() {
        // 获取半个小时之前的时间
        let now = new Date();
        let oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
        return {
            client_id: '',
            chart_show: false,
            params: ['time_delay'],
            start_time: oneHourAgo,
            step_values: [3600, 1800, 900, 450, 300, 120, 60, 30, 10, 5, 1],
            time_formats: ['yyyy-MM-dd HH时', 'yyyy-MM-dd HH时mm分', 'yyyy-MM-dd HH时mm分', 'yyyy-MM-dd HH时mm分', 'yyyy-MM-dd HH时mm分', 'yyyy-MM-dd HH时mm分', 'yyyy-MM-dd HH时mm分', 'yyyy-MM-dd HH时mm分ss秒', 'yyyy-MM-dd HH时mm分ss秒', 'yyyy-MM-dd HH时mm分ss秒', 'yyyy-MM-dd HH时mm分ss秒'],
            step_index: 6,
            count: 100,
        };
    },
    computed: {
        time_format() {
            return this.time_formats[this.step_index];
        },
        step() {
            return this.step_values[this.step_index];
        },
        labels() {
            let start_time = this.adjustTime();
            let labels = [];
            for (let i = 0; i < this.count; i++) {
                labels.push(this.$Date(start_time).add(i * this.step, 'second').format('YYYY-MM-DD HH:mm:ss'));
            }
            return labels;
        }
    },
    methods: {
        handleDateChange() {
            // this.adjustTime();
        },
        handleMoveTime(value) {
            this.start_time = new Date(this.start_time.getTime() + value * this.step * 30 * 1000);
            this.handleGetDetectionValues();
        },
        adjustTime() {
            // 时间取整
            let seconds = Math.floor(this.start_time.getTime() / 1000)
            let m = seconds % this.step_values[this.step_index];
            return new Date((seconds - m) * 1000)
        },
        handleScale(value) {
            let step_index = this.step_index + value;
            if (step_index < 0) {
                step_index = 0;
            } else if (step_index >= this.step_values.length) {
                step_index = this.step_values.length - 1;
            }
            if (this.step_index == step_index) {
                return;
            }
            // 更新步长
            this.step_index = step_index;
            this.handleGetDetectionValues();
        },
        handleGetDetectionValues() {
            this.$http.post('/get_client_detection_values_history', {
                client_id: this.client_id,
                start_time: this.$Date(this.adjustTime()).format('YYYY-MM-DD HH:mm:ss'),
                count: this.count,
                step: this.step,
                params: this.params,
            }).then(res => {
                for (let i = 0; i < this.params.length; i++) {
                    let data = res.data[this.params[i]].data;
                    let config = res.data[this.params[i]].config;
                    for(let j = 0; j < data.length; j++) {
                        if (data[j] == config.invalid_value) {
                            data[j] = null;
                        }else if(data[j] == config.empty_value) {
                            data[j] = null;
                        }else {
                            data[j] = (data[j] - config.value_offset) / config.multiple;
                        }
                    }
                }

                this.$refs.multi_axis_chart.handleUpdateChart({
                    timeLabels: this.labels,
                    data: res.data
                });

                this.chart_show = true;
            })
        }
    }
};
</script>
  
<style scoped>
/* 你可以在这里添加组件的样式 */
</style>